<template>
	<view>
		<view class="example-title">基本用法</view>
		<uni-swipe-action :options="options" @click="bindClick">
			<view class='cont'>SwipeAction 基础使用场景</view>
		</uni-swipe-action>
		<view class="example-title">禁止滑动</view>
		<uni-swipe-action :disabled="true">
			<view class='cont'>SwipeAction 禁止滑动展示</view>
		</uni-swipe-action>
		<view class="example-title">传递点击事件</view>
		<uni-swipe-action :options="options" @click="bindClick">
			<view class='cont'>点击选项时触发事件</view>
		</uni-swipe-action>
		<view class="example-title">开启或关闭事件</view>
		<uni-swipe-action :options="options" @opened="bindOpened" @closed="bindClosed">
			<view class='cont'>开启或关闭事件时触发事件</view>
		</uni-swipe-action>
		<view class="example-title">使用变量控制开关</view>
		<view class="button-view">
			<view class="button" @click="setOpened">当前状态：{{isOpened ? '开' : '关'}}</view>
		</view>
		<uni-swipe-action :options="options" :is-opened="isOpened" :auto-close="true" @opened="bindOpened2" @closed="bindClosed2">
			<view class='cont'>开启或关闭事件时触发事件</view>
		</uni-swipe-action>
		<view class="example-title">与 List 组件一起使用</view>
		<!-- #ifndef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
		<uni-list>
			<uni-swipe-action :options="options1">
				<uni-list-item title="item1" show-arrow="false"></uni-list-item>
			</uni-swipe-action>
			<uni-swipe-action :options="options">
				<uni-list-item title="item2" show-arrow="false"></uni-list-item>
			</uni-swipe-action>
			<uni-swipe-action :options="options3">
				<uni-list-item title="item3" show-arrow="false"></uni-list-item>
			</uni-swipe-action>
		</uni-list>
		<!-- #endif -->
		<!-- #ifdef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
		<view class="uni-list">
			<uni-swipe-action :options="options1">
				<uni-list-item title="item1" show-arrow="false"></uni-list-item>
			</uni-swipe-action>
			<uni-swipe-action :options="options">
				<uni-list-item title="item2" show-arrow="false"></uni-list-item>
			</uni-swipe-action>
			<uni-swipe-action :options="options3">
				<uni-list-item title="item3" show-arrow="false"></uni-list-item>
			</uni-swipe-action>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpened: false,
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				options1: [{
					text: '取消置顶'
				}],
				options3: [{
					text: '置顶'
				}, {
					text: '标记为已读',
					style: {
						backgroundColor: 'rgb(254,156,1)'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}]
			}
		},
		methods: {
			bindClick(value) {
				uni.showToast({
					title: `点击了${value.text}按钮`,
					icon: 'none'
				})
			},
			bindOpened() {
				uni.showToast({
					title: `SwipeAction 开启`,
					icon: 'none'
				})
			},
			bindClosed() {
				uni.showToast({
					title: `SwipeAction 关闭`,
					icon: 'none'
				})
			},
			setOpened() {
				this.isOpened = !this.isOpened
			},
			bindOpened2() {
				this.isOpened = true
			},
			bindClosed2() {
				this.isOpened = false
			}
		}
	}
</script>

<style>
	.cont {
		height: 90upx;
		line-height: 90upx;
		padding: 0 30upx;
		position: relative;
	}

	.cont::before {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		top: 0;
		height: 1px;
		content: '';
		transform: scaleY(0.5);
		background-color: #c8c7cc;
	}

	.cont::after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		content: '';
		transform: scaleY(0.5);
		background-color: #c8c7cc;
	}

	.button-view {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 20upx 0;
	}

	.button {
		border: 1px solid #E7E7E7;
		padding: 8upx 16upx;
		border-radius: 8upx;
	}
</style>
